<template>
  <!-- 二十六、封装分页组件 -->
  <div class="pagination_container">
    <!-- 26.1这个国际化配置是固定的 -->
    <el-config-provider :locale="zhCn">
      <!-- 26.2这里的数据是父组件传过来的 -->
      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="pageSizes" :small="small"
        :disabled="disabled" :background="background" :layout="layout" :total="total" />
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
// 26.4引入中文国际化配置
// 26.5去到父组件 admin.vue 传递数据
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { reactive, toRefs, watch } from 'vue';

// 26.16定义Props数据类型
// interface IProp {
//   currentPage: number;
//   pageSize: Array<number>;
//   [index: string]: any;
// }

// 26.3接收父组件传过来的数据
const props = defineProps({
  // 26.17这里加上 IProp 约束类型
  // const props = defineProps<IProp>({

  // 26.18这里的接收父组件的值就会写得比较少
  // currentPage: 1,

  // 当前页码
  currentPage: {
    type: Number,
    default: 1
  },
  // 一页显示多少条
  pageSize: {
    type: Number,
    default: 10
  },
  // 点击显示多少条
  pageSizes: {
    // 26.15这里要给类型约束为数字的数组
    // type: Array,
    // 26.19以下的写法是因为这里的ts环境，也可以这样写
    type: Array<number>,
    default: [10, 20, 50, 100]
  },
  // 总条数
  total: {
    type: Number,
    default: 0
  },
  // 点击按钮背景
  background: {
    type: Boolean,
    default: true
  },
  // 页码的尺寸
  small: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper"
  }
})

// 26.9子组件修改父组件的数据，子传父
// 26.10element-plus 的属性有：如果传入了 current-page，必须监听 current-page 变更的事件（@update:current-page），否则分页切换不起作用；如果传入了 page-size，且布局包含 page-size 选择器（即 layout 包含 sizes），必须监听 page-size 变更的事件（@update:page-size），否则分页大小的变化将不起作用。
const emit = defineEmits(['size-change', 'page-change', 'update:current-page', 'update:page-size'])

// 26.11将接口返回的数据解构出来，并且是一个响应式的数据返回
let { pageNum, pageSize } = toRefs(reactive({
  pageNum: props.currentPage,
  pageSize: props.pageSize
}))

// 26.12监听 pageNum, pageSize 的数据变化
watch(pageNum, () => {
  console.log(pageNum.value);
  // 26.13调用方法，把当前页数传过去
  emit('update:current-page', pageNum.value)
})

watch(pageSize, () => {
  console.log(pageSize.value);
  // 26.14调用方法，把一页显示多少条传过去
  emit('update:page-size', pageSize.value)
})



</script>

<style lang="less" scoped>
.pagination_container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>